<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="page-box">
              <componentss></componentss>
            </view>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
            <scroll-view scroll-y style="height: 100%;width: 100%;">
              <view class="page-box">
                <jss></jss>
              </view>
            </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
            <scroll-view scroll-y style="height: 100%;width: 100%;">
              <view class="page-box">
                <templates></templates>
              </view>
            </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import componentss from "./components";
import templates from "./template";
import jss from "./js";

export default {
  data() {
    return {
      list: [
        {
          name: '组件'
        },
        {
          name: '工具'
        },
        {
          name: '模板'
        }
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      loadStatus: ['loadmore','loadmore','loadmore','loadmore'],
    };
  },
  onLoad() {

  },
  components: {
    "componentss": componentss,
    "templates": templates,
    "jss":jss,
  },
  computed: {

  },
  methods: {

    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    }
  }
};
</script>

<style>
/* #ifndef H5 */
page {
  height: 100%;
  background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top));
  width: 100%;
}
.swiper-box {
  flex: 1;
}
.swiper-item {
  height: 100%;
}
</style>
